<template>
    
    <!-- 组件的模板 -->
    <div class="page signin-info signin">
        <div class="calendar bg-color">
            <span class="btn_pre" @click="btn_left"></span>
            <span @click="btn_mid">{{sign_data}}</span>
            <span class="btn_nxt" @click="btn_rignt"></span>
        </div>
        <div class="map">
            <img class="pic" src="../../static/imgs/map.png" alt="" @click="gotoPersonalFootPrintMultipoint">
            <div class="user-info">
                <div class="avatar-box">
                    <img v-if="sign_avatar" class="avatar" :src="sign_avatar" alt="" @click="gotoProjectMemberDetail">
                    <img v-else class="avatar" src="../../static/imgs/avatar.png" @click="gotoProjectMemberDetail">
                    <span class="cover" v-if="member_status == -1">已离职</span>
                </div>
                
                <div class="info">
                    <span class="name">{{sign_name}}</span>
                    <span class="count">已上报<em>{{sign_list.length}}</em>次</span>
                </div>
            </div>
            <a class="link link_2" href="javascript:;" @click="gotoPersonalFootPrintMultipoint"><span class="bg_sprite icon"></span>足迹地图</a>
        </div>
        <empty :show-empty="showEmpty && sign_list.length == 0" :msg="'暂无签到记录'"></empty>
        <div class="process">
            <template v-for="item in sign_list">
                <div class="module" v-if="item.sign_type == 0">
                    <span class="bg_sprite state state_2"></span>
                    <span class="line"></span>
                    <div class="wrap">
                        <div class="flex">
                            <!-- <img class="pic" :src="item.photo[0]" alt="" @click="bigPicturePreview(item.photo)" v-if="item.photo.length > 0"> -->
                            <div v-if="item.imgArr&&item.imgArr.thumb_url.length > 0" class="pic img" :style="'background-image:url('+item.imgArr.thumb_url[0]+');'" @click="bigPicturePreview(item.imgArr.url)"></div>
                            <div class="info" @click="gotoPersonalFootprint(item)">
                                <div class="top">
                                    <span class="title">{{item.form_data[0].value.addr_name}}</span>                            
                                    <div class="fr"><span class="time">{{getLocalTime(item.create_at * 1000)}}</span></div>
                                </div>
                                <p class="location"><span class="bg_sprite icon-location"></span>{{item.form_data[0].value.addr}}</p>    
                            </div>
                        </div>
                        <!-- <div class="remark" v-if="item.remark"><em>备注</em>{{item.remark}}</div> -->
                    </div>
                </div>
                <div class="module" v-if="item.sign_type == 1">
                    <span class="bg_sprite state state_2"></span>
                    <span class="line"></span>
                    <div class="wrap">
                        <div class="top">
                            <span class="title">扫码签到</span>
                            <div class="fr"><span class="time">{{getLocalTime(item.create_at * 1000)}}</span></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>        
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi'
    import clientInfo from 'gapi/clientInfo.js'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import Empty from 'components/Empty/Empty'

    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                showEmpty: false,
                team_id: 0,
                project_id: 0,
                sign_userid: 0,
                timestr: 0,//时间戳
                sign_name: '',
                member_status: 0,
                sign_avatar: '',
                sign_count: 0,
                sign_list: [
                    // {
                    //     "id": "34",
                    //     "date": "1482854400",
                    //     "sign_type": "0",
                    //     "position": "地点名称",
                    //     "address": "美国 休斯顿太空中心",
                    //     "user_id": "3362",
                    //     "photo": [
                    //       "http://sta.doumi.com/cgi/placeholder.php?size=50x50"
                    //     ],
                    //     "remark": "美国休斯顿 签到",
                    //     "create_at": 1482912178
                    // }
                ],
                today: '',
                require_field: [],
                group_id: 0,
            }
        },
        computed: {
            sign_data: function(){//2016-09-09
                return util.getLocalTime(this.timestr, 'yyyy-MM-dd')
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                let tempInfo = JSON.parse(util.getUrddataString('sign_info'))
                console.log('获取的信息'+JSON.stringify(tempInfo))
                this.team_id = tempInfo.team_id
                this.project_id = tempInfo.project_id
                this.sign_userid = tempInfo.sign_userid
                this.timestr = tempInfo.timestr
                this.group_id = tempInfo.group_id

                //今日时间
                let date = new Date()
                let timestr_today = date.getTime()
                this.today = util.getLocalTime(timestr_today, 'yyyy-MM-dd')  

                this.getData()
            },
            getData(){
                //获取个人签到记录(管理员查看)
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/sign/manager/statistics/singlesign',
                    type: 'GET',
                    data: {
                        team_id: this.team_id,
                        project_id: this.project_id,
                        sign_userid: this.sign_userid,
                        date: this.sign_data
                    },
                    timeout: 10000,
                    success: (data) => {
                        // success
                        // alert(JSON.stringify(data))
                        console.log(data)
                        if(data.errno == 0){
                            this.sign_name = data.data.sign_name
                            this.member_status = data.data.member_status
                            this.sign_avatar = data.data.sign_avatar
                            this.sign_count = data.data.sign_count || 0
                            this.sign_list = data.data.sign_list
                            if(this.sign_list.length == 0){
                                this.showEmpty = true
                            }
                            this.sign_list.forEach((obj1) => {
                                if(obj1.sign_type == 0){
                                    obj1.form_data.forEach((obj2) => {
                                        data.data.require_field.forEach((obj3) => {
                                            if(obj2.id == obj3.id){
                                                obj2.type = obj3.type
                                                obj2.title = obj3.info.title

                                                if(obj2.type === 'Imageview' && obj1.imgArr === undefined){
                                                    obj1.imgArr = obj2.value
                                                }
                                            }
                                        })
                                    })
                                }
                            })
                            this.require_field = data.data.require_field
                        }else{
                            // widget.toast('服务器异常')
                            widget.toast(data.errmsg)
                            // alert(JSON.stringify(data))
                        }
                        // alert(JSON.stringify(data))
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    error: (xhr, status) => {
                        // error
                        widget.toast('网络连接失败，请检查网络')
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                        commonPage.loadPageStatus('loadSuccess')
                    }
                })
            },
            btn_left (){
                clientInfo.getNetworkType((networkData) => {
                    // alert(JSON.stringify(networkData))    // 网络信息
                    if(networkData.network == 'invalid'){
                        widget.toast("网络连接失败，请检查网络")
                        return
                    }

                    // alert(typeof this.timestr)
                    this.timestr = this.timestr - 3600 * 24 * 1000

                    this.getData()
                })
            },
            btn_rignt (){
                if(this.today > this.sign_data){
                    clientInfo.getNetworkType((networkData) => {
                        // alert(JSON.stringify(networkData))    // 网络信息
                        if(networkData.network == 'invalid'){
                            widget.toast("网络连接失败，请检查网络")
                            return
                        }

                        this.timestr = this.timestr + 3600 * 24 * 1000

                        this.getData()
                    })
                }else{
                    widget.toast('不能查看当日以后的日期')
                }
                
            },
            btn_mid (){
                KCApiApp.showDatePicker('2000-01-01', this.today, this.sign_data, (data) => {
                    clientInfo.getNetworkType((networkData) => {
                        // alert(JSON.stringify(networkData))    // 网络信息
                        if(networkData.network == 'invalid'){
                            widget.toast("网络连接失败，请检查网络")
                            return
                        }

                        this.timestr = util.getStampFromDate(data.SelectedDate)
                        this.getData()
                    })
                })
            },
            gotoPersonalFootPrintMultipoint(){
                clientInfo.getNetworkType((networkData) => {
                    // alert(JSON.stringify(networkData))    // 网络信息
                    if(networkData.network == 'invalid'){
                        widget.toast("网络连接失败，请检查网络")
                        return
                    }

                    // if(this.sign_list.length == 0){
                    //     widget.toast('当日无签到记录')
                    //     return
                    // }
                    let tempObj = {
                        team_id: this.team_id,
                        project_id: this.project_id,
                        sign_userid: this.sign_userid,
                        date: this.sign_data
                    }
                    let tempJson = JSON.stringify(tempObj)
                    // alert(tempJson)
                    let encodeStr = encodeURIComponent(`sign_info=${tempJson}`)
                    location.href = `dmsaas://PersonalFootPrintMultipoint?urdData=${encodeStr}`
                })
            },
            getLocalTime(timestr){
                return util.getLocalTime(timestr, 'HH:mm')
            },
            gotoProjectMemberDetail(){
                let encodeStr = encodeURIComponent(`tid=${this.team_id}&pid=${this.project_id}&gid=${this.group_id}&uid=${this.sign_userid}`)
                location.href = `dmsaas://ProjectMemberDetail?urdData=${encodeStr}`
            },
            bigPicturePreview(imgList){
                clientUi.bigPicturePreview('预览', imgList, 0)
            },
            gotoPersonalFootprint(item){
                clientInfo.getNetworkType((data) => {
                    // alert(JSON.stringify(data))    // 网络信息
                    if(data.network == 'invalid'){
                        widget.toast("网络连接失败，请检查网络")
                        return
                    }
                    let tempObj = {
                        user_id: this.sign_userid,
                        user_name: this.sign_name,
                        avatar: this.sign_avatar,
                        member_status: this.member_status,
                        // position_name: item.position,
                        // address: item.address,
                        // coordinate: item.coordinate,
                        sign_time: item.create_at,
                        // photo: item.photo,
                        // remark: item.remark,
                        require_field: this.require_field,
                        form_data: item.form_data
                    }
                    cache.setMemoryCache('sign_info_user_foot', tempObj)
                    // let sign_info = JSON.stringify(tempObj)
                    // alert(sign_info)
                    // let encodeStr = encodeURIComponent(`sign_info=${sign_info}`)
                    window.location.href = `dmsaas://PersonalFootprint`
                })
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/attendance.css"></style>
<style type="text/css">
    div.img{
        background-position: 50% 50%;
        background-size: cover;
    }
</style>


